<template>
  <div class="title">

    <el-input v-model="input" placeholder="姓名" style="width: 200px" />
    <el-button @click="search">搜索</el-button>  
  </div>


  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="序号" width="60"/>
    <el-table-column prop="name" label="宠物名称" />
    <el-table-column prop="doctor" label="主治医生" width="80"/>
    <el-table-column prop="type" label="品类" width="60"/>
    <el-table-column label="年龄" width="100">
      <template #default="scope">
        <span>{{ formatAge(scope.row.age) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="phone" label="手机号" />
    <el-table-column prop="time" label="开单时间" />
    <el-table-column label="操作">
      <template #default="scope">
        <!-- <el-button>编辑</el-button> -->
        <el-popconfirm
          title="你确定要删除了?"
          @confirm="confirm(scope.row.id)"
          @cancel="cancel"
        >
          <template #reference>
            <el-button>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    :page-size="10"
    layout="prev, pager, next"
    :total="total"
    @current-change="pageChange"
  />
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import "@/mock/order";
import axios from "axios";
interface ItemType {
  id: number;
  name: string;
  doctor: string;
  type: string;
  age: number;
  phone: number;
  time: number;
}

const tableData = ref<ItemType[]>([]);
const total = ref<number>(0);
const input = ref<string>("");

// 当前第几页
let page = 1;

onMounted(() => {
  getData();
});

const getData = () => {
  axios
    .post("/api/pos/list", {
      pageSize: 10,
      currentPage: page,
      search: input.value,
    })
    .then((res) => {
      console.log(res);
      
      tableData.value = res.data.result;
      total.value = res.data.count;
    });
};

const pageChange = (page1: number) => {
  page = page1;
  getData();
};

const search = () => {
  page = 1;
  getData();
};

const formatAge = (month: number) => {
  const y = Math.floor(month / 12);
  const m = month % 12;
  return y ? y + "年" + m + "个月" : m + "个月";
};
const remove = (id: number) => {
  console.log(id);
};

const confirm = (id: number) => {
  console.log("确定删除", id);
  axios
    .post("/api/pos/del", {
      id: id,
    })
    .then((res) => {
      getData();
    });
};
const cancel = () => {
  console.log("取消");
};
</script>

<style lang="less" scoped>
.el-pagination {
  margin-top: 20px;
  justify-content: flex-end;
}

</style>